


<script setup>
import {onMounted, onUnmounted} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {useRoute} from "vue-router";

const route = useRoute()
let map = null;
onMounted(() => {
  var data = route.query.item
  console.log("结果:",JSON.parse(data))
  var points = JSON.parse(data)

  window._AMapSecurityConfig = {
    securityJsCode:'a35977b0fe3c15cc97a39e8c0c684978',
  };
  AMapLoader.load({
    key: '1c522523b1358e4f0f15d2bec1071caa',  // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","AMap.Driving"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
      .then((AMap) => {
        /**
         * 初始化地图
         */

        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });

        /**
         * 驾车路线规划
         */

        var driving = new AMap.Driving({
          map: map,
          panel: "panel",
          // extensions: "base",
          policy: 0, //驾车路线规划策略，0是速度优先的策略
        });
        // var points = [
        //   { keyword: "北京市地震局（公交站）", city: "北京" },
        //   { keyword: "孵化园（地铁站）", city: "成都" },
        // ];
        driving.search(points, function (status, result) {
          if (status === 'complete') {
            console.log(result)
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        });




        // var citySearch = new AMap.CitySearch()
        // citySearch.getLocalCity(function (status, result) {
        //   if (status === 'complete' && result.info === 'OK') {
        //     console.log(result)
        //     // 查询成功，result即为当前所在城市信息
        //   }
        // })




      })
      .catch((e) => {
        console.log(e);
      });

});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
  <div id="panel"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 70px;
  right: 10px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>